<template>
  <div class="clinic-management">
    <!-- 顶部导航栏 -->
    <el-menu 
      :default-active="activeNav" 
      mode="horizontal" 
      background-color="#fff"
      text-color="#383838"
      active-text-color="#00aa00"
      @select="handleNavSelect">
      <el-menu-item index="storeList">门店列表</el-menu-item>
      <el-menu-item index="financialStats">财务统计</el-menu-item>
      <el-menu-item index="storeSettings">门店设置</el-menu-item>
      <el-menu-item index="purchaseReview">门店采购审核</el-menu-item>
      <el-menu-item index="dataStats">数据统计</el-menu-item>
    </el-menu>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="searchParams.clinic" placeholder="诊所" size="mini" clearable></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="searchParams.keyword" size="mini" placeholder="诊所名称/手机号码" clearable></el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchParams.status" placeholder="状态" size="mini" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="已绑定" value="bound"></el-option>
            <el-option label="停用" value="disabled"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
          <el-button size="mini" @click="resetSearch">重置</el-button>
          <el-button size="mini" type="success" @click="showAddDialog">添加诊所</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 左侧地区列表 -->
      <div class="region-list">
        <div class="region-header">
          <span>全部地区</span>
        </div>
        <el-tree
          :data="regionData"
          :props="treeProps"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleRegionClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span v-if="data.count" class="count">({{ data.count }})</span>
          </span>
        </el-tree>
      </div>

      <!-- 右侧诊所列表 -->
      <div class="clinic-list">
        <el-table
          :data="clinicData"
          border
          style="width: 100%"
          v-loading="loading">
          <el-table-column
            prop="name"
            label="诊所名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="contact"
            label="联系人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系方式"
            width="180">
            <template slot-scope="scope">
              <div>{{ scope.row.phone }}</div>
              <div class="phone-carrier">{{ scope.row.carrier }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            min-width="250">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="100">
            <template slot-scope="scope">
              <el-tag 
                :type="scope.row.status === 'bound' ? 'success' : 'info'"
                size="small">
                {{ scope.row.status === 'bound' ? '已绑定' : '停用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button 
                type="text" 
                size="small" 
                @click="showReport(scope.row)">
                报表
              </el-button>
              <el-button 
                type="text" 
                size="small" 
                @click="toggleStatus(scope.row)"
                :style="{color: scope.row.status === 'bound' ? '#F56C6C' : '#67C23A'}">
                {{ scope.row.status === 'bound' ? '停用' : '启用' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 添加诊所对话框 -->
    <el-dialog
      title="添加诊所"
      :visible.sync="addDialogVisible"
      width="50%">
      <el-form :model="addForm" label-width="100px">
        <el-form-item label="诊所名称" required>
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人" required>
          <el-input v-model="addForm.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" required>
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" required>
          <el-cascader
            v-model="addForm.region"
            :options="regionOptions"
            :props="{ value: 'id', label: 'name' }">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" required>
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="addForm.status"
            active-value="bound"
            inactive-value="disabled"
            active-text="已绑定"
            inactive-text="停用">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddClinic">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ClinicManagement',
  data() {
    return {
      activeNav: 'storeList',
      searchParams: {
        clinic: '',
        keyword: '',
        status: '',
        region: ''
      },
      regionData: [
        {
          id: 'all',
          label: '全部 (4)',
          count: 6
        },
        {
          id: 'other',
          label: '其他 (1)',
          count: 1
        },
        {
          id: 'beijing',
          label: '宜宾市 (1)',
          count: 1
        },
        {
          id: 'tianjin',
          label: '水富市 (1)',
          count: 1
        },
        {
          id: 'shandong',
          label: '成都市 (1)',
          count: 1
        },
        {
          id: 'hubei',
          label: '乐山市 (1)',
          count: 1
        },
      ],
      treeProps: {
        children: 'children',
        label: 'label'
      },
      clinicData: [
        {
          id: 1,
          name: '健尔康天津诊所',
          contact: '张三',
          phone: '15632261216',
          carrier: '中国移动',
          address: '中国,天津市,和平区解放北路123号',
          status: 'bound'
        },
        {
          id: 2,
          name: '普牛国医馆',
          contact: '海山甲',
          phone: '18986178942',
          carrier: '中国移动',
          address: '中国,湖北省,武汉市,黄冈区东风大道130号',
          status: 'bound'
        },
        {
          id: 3,
          name: '湖南张强中医诊所',
          contact: '李伟',
          phone: '13000000333',
          carrier: '中国移动',
          address: '中国,湖南省,长沙市,岳麓区,湖南岳麓长沙市场',
          status: 'disabled'
        },
        {
          id: 4,
          name: '山东康泰诊所',
          contact: '王五',
          phone: '15882018158',
          carrier: '中国移动',
          address: '中国,山东省,菏泽市,牡丹区八一路',
          status: 'bound'
        },
        {
          id: 5,
          name: '北京同仁堂分店',
          contact: '赵六',
          phone: '18621105229',
          carrier: '中国移动',
          address: '中国,北京市,东城区王府井大街88号',
          status: 'bound'
        },
        {
          id: 6,
          name: '其他诊所',
          contact: '钱七',
          phone: '15325691432',
          carrier: '中国移动',
          address: '中国,上海市,浦东新区张江高科技园区',
          status: 'bound'
        }
      ],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 6
      },
      addDialogVisible: false,
      addForm: {
        name: '',
        contact: '',
        phone: '',
        region: [],
        address: '',
        status: 'bound'
      },
      regionOptions: [
        {
          id: 'beijing',
          name: '北京',
          children: [
            {
              id: 'dongcheng',
              name: '东城区'
            },
            {
              id: 'xicheng',
              name: '西城区'
            }
          ]
        },
        {
          id: 'tianjin',
          name: '天津',
          children: [
            {
              id: 'heping',
              name: '和平区'
            },
            {
              id: 'hexi',
              name: '河西区'
            }
          ]
        },
        {
          id: 'shandong',
          name: '山东',
          children: [
            {
              id: 'jinan',
              name: '济南市'
            },
            {
              id: 'heze',
              name: '菏泽市'
            }
          ]
        },
        {
          id: 'hubei',
          name: '湖北',
          children: [
            {
              id: 'wuhan',
              name: '武汉市'
            },
            {
              id: 'huanggang',
              name: '黄冈市'
            }
          ]
        },
        {
          id: 'hunan',
          name: '湖南',
          children: [
            {
              id: 'changsha',
              name: '长沙市'
            },
            {
              id: 'yueyang',
              name: '岳阳市'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNavSelect(index) {
      this.activeNav = index;
      // 这里可以添加导航切换的逻辑
    },
    handleSearch() {
      this.loading = true;
      // 模拟API请求
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    resetSearch() {
      this.searchParams = {
        clinic: '',
        keyword: '',
        status: '',
        region: ''
      };
      this.handleSearch();
    },
    handleRegionClick(data) {
      this.searchParams.region = data.id;
      this.handleSearch();
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.handleSearch();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.handleSearch();
    },
    showAddDialog() {
      this.addDialogVisible = true;
    },
    handleAddClinic() {
      // 这里添加提交表单的逻辑
      this.addDialogVisible = false;
      this.$message.success('添加诊所成功');
    },
    showReport(clinic) {
      this.$message.info(`查看 ${clinic.name} 的报表`);
    },
    toggleStatus(clinic) {
      const newStatus = clinic.status === 'bound' ? 'disabled' : 'bound';
      const action = newStatus === 'bound' ? '启用' : '停用';
      
      this.$confirm(`确定要${action}该诊所吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clinic.status = newStatus;
        this.$message.success(`${action}成功`);
      }).catch(() => {
        this.$message.info('已取消操作');
      });
    }
  }
}
</script>

<style lang="less" scoped>
.clinic-management {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-area {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.main-content {
  display: flex;
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.region-list {
  width: 220px;
  border-right: 1px solid #e6e6e6;
  overflow-y: auto;
}

.region-header {
  padding: 15px;
  font-weight: bold;
  border-bottom: 1px solid #e6e6e6;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.count {
  color: #909399;
  font-size: 12px;
}

.clinic-list {
  flex: 1;
  padding: 15px;
  overflow: auto;
}

.phone-carrier {
  font-size: 12px;
  color: #909399;
}

.pagination {
  margin-top: 15px;
  text-align: right;
}

.el-table {
  margin-top: 15px;
}

.el-table .el-button--text {
  padding: 0;
}

.el-dialog .el-form {
  padding: 0 20px;
}

.el-cascader {
  width: 100%;
}
</style>